<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    @open="handleOpen"
    @close="handleClose"
    background-color="#304156"
    text-color="#bfcbd9"
    active-text-color="#409EFF"
    :unique-opened="true"
  >
    <el-menu-item index="1" @click="$router.push('/')">
      <el-icon><HomeFilled /></el-icon>
      <template #title>米梵后台管理</template>
    </el-menu-item>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Goods /></el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item index="2-1" @click="$router.push('/goods/list')"
        >商品列表</el-menu-item
      >
      <el-menu-item index="2-2" @click="$router.push('/goods/sku')"
        >SKU管理</el-menu-item
      >
      <el-menu-item index="2-3" @click="$router.push('/goods/category')"
        >分类管理</el-menu-item
      >

      <el-menu-item index="2-6" @click="$router.push('/goods/comment')"
        >评论管理</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Document /></el-icon>
        <span>订单管理</span>
      </template>
      <el-menu-item index="3-1" @click="$router.push('/orders/list')"
        >订单列表</el-menu-item
      >
      <el-menu-item index="3-2" @click="$router.push('/orders/refund')"
        >退款管理</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>
        <el-icon><Avatar /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="4-1" @click="$router.push('/users/list')"
        >用户列表</el-menu-item
      >
      <el-menu-item index="4-2" @click="$router.push('/users/analysis')"
        >用户分析</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>
        <el-icon><Promotion /></el-icon>
        <span>营销管理</span>
      </template>
      <el-menu-item index="5-1" @click="$router.push('/marketing/coupon')"
        >优惠券管理</el-menu-item
      >
      <el-menu-item index="5-2" @click="$router.push('/marketing/activity')"
        >活动管理</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="6">
      <template #title>
        <el-icon><Reading /></el-icon>
        <span>内容管理</span>
      </template>
      <el-menu-item index="6-1" @click="$router.push('/content/banner')"
        >轮播图管理</el-menu-item
      >
      <el-menu-item index="6-2" @click="$router.push('/content/announcement')"
        >公告管理</el-menu-item
      >
    </el-sub-menu>
    <el-menu-item index="7" @click="$router.push('/statistics')">
      <el-icon><DataLine /></el-icon>
      <template #title>数据统计</template>
    </el-menu-item>
    <el-sub-menu index="8">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>商城设置</span>
      </template>
      <el-menu-item index="8-1" @click="$router.push('/mallSetting/brand')"
        >品牌管理</el-menu-item
      >
    </el-sub-menu>
    <el-sub-menu index="9">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </template>
      <el-menu-item index="9-1" @click="$router.push('/settings/admins')"
        >管理员管理</el-menu-item
      >
      <el-menu-item index="9-2" @click="$router.push('/settings/roles')"
        >角色管理</el-menu-item
      >
      <el-menu-item index="9-4" @click="$router.push('/settings/menu')"
        >菜单管理</el-menu-item
      >
      <el-menu-item index="9-3" @click="$router.push('/settings/permissions')"
        >权限管理</el-menu-item
      >
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import {
  HomeFilled,
  Goods,
  Document,
  Avatar,
  Promotion,
  Reading,
  DataLine,
  Setting,
} from "@element-plus/icons-vue";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const activeIndex = computed(() => route.path);
const isCollapse = ref(false);

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-menu {
  border-right: none;
}
</style>
